<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import CoverComponent from './lib/cover/index.vue'
import SliderComponent from '@/components/slider/index.vue'
import HomeHot from './lib/hot/index.vue'
import type { HomeCardListInterface } from './interface'

const router = useRouter()

const dataSource = ref<HomeCardListInterface[]>([])

onMounted(() => {
  import('./data/index.json').then((resp) => {
    if (!resp.default) {
      ElMessage({
        type: 'error',
        message: '数据获取失败',
      })
    } else {
      dataSource.value = resp.default
    }
  })
})

const toDetailed = (item: HomeCardListInterface) => {
  if (item.url) {
    router.push({
      path: '/scattered' + item.url,
    })
  } else {
    router.push({
      path: '/detailed',
      query: { id: item.id },
    })
  }
}
</script>

<template>
  <div class="base-container home-container">
    <CoverComponent />
    <!-- <div class="chuck"></div>
        <SliderComponent text="我的收藏" /> -->
    <div class="chuck"></div>
    <SliderComponent text="热门功能" />
    <div class="chuck"></div>
    <HomeHot :dataSource="dataSource" @click="toDetailed" />
    <!-- <div class="chuck"></div>
        <SliderComponent text="精选功能" /> -->
  </div>
</template>

<style scoped lang="scss">
@use './index.scss';
</style>
